<!-- Charts plugins -->
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/flot/jquery.flot.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/flot/jquery.flot.tooltip_0.4.4.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/sparkline/jquery.sparkline.min.js"></script><!-- Sparkline plugin -->
<!-- Misc plugins -->
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>misc/qtip/jquery.qtip.min.js"></script><!-- Custom tooltip plugin -->
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>misc/totop/jquery.ui.totop.min.js"></script>

<!-- End Charts Plugins -->
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default chart">
			<div class="panel-heading">
				<h4>
					<span class="icon16 icomoon-icon-bars"></span>
					<span>Nilai Rata - Rata Per Pertanyaan</span>
				</h4>
				<!--<a href="#" class="minimize">Minimize</a>-->
			</div>
			<div class="panel-body">
			   <div class="order-bars-chart" style="height: 230px;width:100%;">
				</div>
			</div>

		</div><!-- End .panel -->

	</div><!-- End .span6 -->
</div><!-- End .panel -->

<script language="javascript">
$(document).ready(function() {
	var divElement = $('div'); //log all div elements

    $("#form-validate").validate({
    	ignore: null,
    	ignore: 'input[type="hidden"]',
    	rules: {
			tgl_awal: "required",
			tgl_akhir: "required"
		},
		messages: {
			tgl_awal: "Baris ini wajib diisi !!!",
			tgl_akhir: "Baris ini wajib diisi !!!"
		}
    });

	var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
	if (divElement.hasClass('order-bars-chart')) {
	$(function () {
		//some data
		var ds = new Array();
		<?php
		$a=0;
		foreach($ijin as $row){
		$a++;
		?>
		var d<?php echo $a; ?> = [];
			<?php
			$b=0;
			foreach($tanya as $row2){
			$b++;
			$pertanyaan	= $this->m_tanya_model->get_nilai_dinas($tgl_awal,$tgl_akhir,$row["ID_IJIN"],$row2["ID_PERTANYAAN"]);
			?>
		d<?php echo $a; ?>.push([<?php echo $b; ?>, <?php echo ($pertanyaan["nilai"] == NULL || $pertanyaan["nilai"] == "") ? (0) : ($pertanyaan["nilai"]); ?>]);
		<?php
			}
		?>
		ds.push({
	     	label: "<?php echo $row["NAMA_IJIN"]?>",
	        data:d<?php echo $a; ?>,
	        bars: {order: <?php echo $a; ?>}
	    });
		<?php
		}
		?>
		var options = {
				bars: {
					show:true,
					barWidth: 0.05,
					fill:1
				},
				grid: {
					show: true,
				    aboveData: false,
				    color: "#3f3f3f" ,
				    labelMargin: 5,
				    axisMargin: 0,
				    borderWidth: 0,
				    borderColor:null,
				    minBorderMargin: 5 ,
				    clickable: true,
				    hoverable: true,
				    autoHighlight: false,
				    mouseActiveRadius: 20
				},
		        series: {
		        	grow: {active:false}
		        },
		        legend: { position: "ne" },
		        colors: chartColours,
		        tooltip: true, //activate tooltip
				tooltipOpts: {
					content: "%s : %y.2",
					shifts: {
						x: -30,
						y: -50
					}
				}
		};

		$.plot($(".order-bars-chart"), ds, options);
	});
	}//end if
});

</script>